<script setup>
// 消耗提示组件
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, ref } from "vue";
import request from "@/common/utils/request";
import { useRouter } from "vue-router";
import { debounce } from "lodash";

const router = useRouter();
const props = defineProps({
  // 剩余的声音克隆次数
  voiceNum: {
    type: Number,
    default: 0,
  },
  currentNum: {
    type: Number,
    default: 1,
  },
  unit: {
    type: String,
    default: "",
  },
  name_unit: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["handleOk", 'topUp']);
const dialog = ref(null);
const showModal = () => {
  dialog.value.showModal();
};
const closeModal = () => {
  dialog.value.closeModal();
};

// 确认提交
const handleOk = () => {
  emit("handleOk");
  dialog.value.closeModal();
};

const debouncehandleOK = debounce(handleOk, 1000, {
  leading: true,
  trailing: false,
});

// 去充值
const goTopup = () => {
  emit('topUp')
  closeModal()
};

defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div>
    <baseModel ref="dialog" :contentWidth="620" :zIndex="1001">
      <template #title>
        <div>
          <span style="font-weight: 600">确认生成</span>
        </div>
      </template>
      <template #content>
        <div class="content">

          <template v-if="props.currentNum >= props.voiceNum">
            <h3 class="tips_title">
              专业声音克隆实例有效期为一年且一年后删除，可重复克隆10次，是否确认创建？
            </h3>
          </template>
          您剩余的声音克隆{{ props.name_unit }}为
          <span style="color: red">{{ props.currentNum }} </span>{{ props.unit }}
          <span>本次消耗{{ props.name_unit }}
            <span style="color: var(--ss-primary-color)">{{
              props.voiceNum
              }}</span>
            {{ props.unit }}{{ props.name_unit }}</span>
          <!-- 
           
          -->
          <a-button  type="link"  v-if="props.voiceNum > props.currentNum" @click="goTopup" style="padding: 0; line-height: 1; margin-left: 5px;">点击前往充值</a-button>
        </div>
      </template>
      <template #footer>
        <a-button key="back" @click="debouncehandleOK" v-if="props.currentNum >= props.voiceNum" type="primary">确定</a-button>
        <a-button key="back" @click="closeModal">取消</a-button>
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
.content {
  font-weight: 600;

  .tips_title {
    font-size: 14px;
    color: #5d5d5d;
  }
}
</style>
